<template>
  <el-row class="operation-bar" align="middle" justify="space-between">
    <el-col :span="isMobile ? 24 : 16">
      <div v-if="isAllFiles && !isSelectionMode" class="mobile-actions">
        <el-button 
          type="primary" 
          size="mini" 
          class="glowing-btn upload-btn" 
          @click="openUploadDialog"
        >
          <el-icon><Upload /></el-icon>
          上传
        </el-button>
        <el-button 
          type="primary" 
          size="mini" 
          class="glowing-btn folder-btn" 
          @click="openCreateFolderDialog"
        >
          <el-icon><Folder /></el-icon>
          新建
        </el-button>
      </div>
      <div v-if="isSelectionMode && selectedFiles.length > 0" class="button-group mobile-button-group">
        <el-button class="custom-button" size="mini" @click="handleBatchDownload">
          <el-icon><Download /></el-icon>
          下载
        </el-button>
        <el-button class="custom-button" size="mini" @click="handleBatchDelete">
          <el-icon><Delete /></el-icon>
          删除
        </el-button>
        <el-button class="custom-button" size="mini" @click="handleMove">
          <el-icon><Position /></el-icon>
          移动
        </el-button>
        <el-button class="custom-button" size="mini" @click="handleCopy">
          <el-icon><DocumentCopy /></el-icon>
          复制
        </el-button>
        <el-button class="custom-button" size="mini" @click="handleShare">
          <el-icon><Share /></el-icon>
          分享
        </el-button>
      </div>
    </el-col>
    <el-col :span="isMobile ? 24 : 8" class="text-right">
      <div class="search-container">
        <el-input
          v-model="searchQuery"
          placeholder="搜索文件"
          class="search-input"
          @input="handleSearch"
          size="mini"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <el-space :size="2" class="right-actions">
        <el-tooltip content="刷新" placement="top">
          <el-button text @click="$emit('refresh')" size="mini">
            <el-icon style="font-size: 16px;"><Refresh /></el-icon>
          </el-button>
        </el-tooltip>
        <el-tooltip
          v-if="viewMode === 'grid'"
          content="选择模式"
          placement="top"
        >
          <el-button
            text
            :class="{ 'is-active': isSelectionMode }"
            @click="toggleSelectionMode"
            size="mini"
          >
            <el-icon style="font-size: 16px;"><Finished /></el-icon>
          </el-button>
        </el-tooltip>
        <el-divider direction="vertical" class="divider" />
        <el-tooltip content="列表视图" placement="top">
          <el-button
            text
            :class="{ 'is-active': viewMode === 'table' }"
            @click="handleViewModeChange('table')"
            size="mini"
          >
            <el-icon style="font-size: 16px;"><List /></el-icon>
          </el-button>
        </el-tooltip>
        <el-tooltip content="网格视图" placement="top">
          <el-button
            text
            :class="{ 'is-active': viewMode === 'grid' }"
            @click="handleViewModeChange('grid')"
            size="mini"
          >
            <el-icon style="font-size: 16px;"><Grid /></el-icon>
          </el-button>
        </el-tooltip>
      </el-space>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import {
  Delete,
  Download,
  Finished,
  Folder,
  Grid,
  List,
  Position,
  Refresh,
  Search,
  Share,
  DocumentCopy,
  Upload,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { computed, ref, onMounted, onUnmounted } from "vue";
import { getFileTree } from "@/api/file";

const props = defineProps<{
  currentPath: string; 
  selectedFiles: API.FileDTO[]; 
  fileType: number | undefined | null; 
  viewMode: string; 
  isSelectionMode: boolean; 
}>();

const emit = defineEmits([
  "refresh",
  "viewModeChange",
  "selectionModeChange",
  "openUploadDialog",
  "openCreateFolderDialog",
  "search",
  "batchDelete",
  "batchMove",
  "batchCopy",
  "shareFiles",
  "batchDownload",
]);

const searchQuery = ref("");
const isMobile = ref(false);

const handleResize = () => {
  isMobile.value = window.innerWidth <= 768;
};

onMounted(() => {
  handleResize();
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

const isAllFiles = computed(
  () => props.fileType === undefined || props.fileType === null
);

const handleViewModeChange = (newMode: "table" | "grid") => {
  emit("viewModeChange", newMode);
};

const toggleSelectionMode = () => {
  emit("selectionModeChange", !props.isSelectionMode);
};

const handleBatchDownload = () => {
  ElMessage.success(`正在下载 ${props.selectedFiles.length} 个文件`);
  emit("batchDownload", props.selectedFiles);
};

const handleBatchDelete = () => {
  ElMessageBox.confirm(
    `确定要删除选中的 ${props.selectedFiles.length} 个文件吗？`,
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      emit("batchDelete", props.selectedFiles);
    })
    .catch(() => {
    });
};

const handleMove = () => {
  emit("batchMove", props.selectedFiles, props.currentPath);
  getFileTree();
};

const handleCopy = () => {
  emit("batchCopy", props.selectedFiles, props.currentPath);
  getFileTree();
};

const handleShare = () => {
  emit("shareFiles", props.selectedFiles);
};

const openUploadDialog = () => {
  emit("openUploadDialog");
};

const openCreateFolderDialog = () => {
  emit("openCreateFolderDialog");
};

const handleSearch = () => {
  emit("search", searchQuery.value);
};
</script>

<style scoped>
/* 基础按钮样式 - 统一浅色基调 */
.glowing-btn {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 13px;
  margin-right: 3px;
  padding: 3px 7px;
  background: #e8f4ff;
  border-color: #c6e2ff;
  color: #1890ff;
}

.glowing-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: rotate(-45deg);
  animation: glowing 3s linear infinite;
}

.glowing-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  background: #d1eaff;
}

.upload-btn, .folder-btn {
  background: #e8f4ff;
  border-color: #c6e2ff;
}

@keyframes glowing {
  0% { left: -50%; top: -50%; }
  100% { left: 150%; top: 150%; }
}

.operation-bar {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  flex-wrap: wrap;
}

.text-right {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.right-actions {
  display: inline-flex;
  align-items: center;
}

.right-actions .el-button {
  padding: 3px;
  height: 22px;
  width: 22px;
  transition: all 0.2s ease;
}

.right-actions .el-button:hover {
  background-color: #f0f7ff;
  transform: scale(1.05);
}

.right-actions .el-button.is-active {
  color: #1890ff;
  background-color: #f0f7ff;
}

.el-icon {
  font-size: 13px;
}

.divider {
  height: 12px;
  margin: 0 1px;
}

.el-space {
  --el-space-x-gap: 1px;
}

.el-space.right-actions {
  margin-left: 3px;
}

/* 批量操作按钮组 - 缩小尺寸+统一样式 */
.button-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.button-group::-webkit-scrollbar {
  display: none;
}

.mobile-button-group {
  gap: 2px;
}

.custom-button {
  border-radius: 16px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  font-size: 11px;
  background: #f0f7ff;
  color: #1890ff;
  border: 1px solid #e1f0ff;
  flex: 1;
  min-width: 60px;
}

.custom-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(24, 144, 255, 0.15);
  background: #e1f0ff;
  border-color: #c6e2ff;
}

.custom-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(24, 144, 255, 0.1);
}

/* 搜索框样式 */
.search-container {
  display: inline-block;
  transition: all 0.4s ease;
  padding: 2px;
  margin-right: 4px;
}

.search-input {
  width: 140px;
  transition: all 0.4s ease;
  border-radius: 30px;
  border: 1px solid #e1f0ff;
  padding: 2px 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.search-input input {
  width: 100%;
  border: none;
  outline: none;
  background: #fff;
  font-size: 12px;
}

.search-input:focus-within {
  width: 200px;
  box-shadow: 0 1px 4px rgba(24, 144, 255, 0.15);
  border-color: #c6e2ff;
}

/* 手机端专属样式 */
@media (max-width: 768px) {
  .operation-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .text-right {
    width: 100%;
    justify-content: space-between;
    margin-top: 0;
  }
  .glowing-btn {
    font-size: 11px;
    margin-bottom: 0;
    padding: 2px 6px;
  }
  .custom-button {
    font-size: 10px;
    padding: 2px 6px;
    min-width: 55px;
  }
  .search-input {
    width: 120px;
  }
  .search-input:focus-within {
    width: 180px;
  }
  .right-actions .el-button {
    height: 18px;
    width: 18px;
  }
  .el-icon {
    font-size: 12px;
  }
  .mobile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
  }
}
</style>